<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性、方法和侦听器</title>
  <script src="../static/vue.js"></script>
</head>
<body>
<div id="app">
  {{firstName+lastName}}=={{fullNamecomputed}}==={{fullName()}}
</div>


<script>
      fullName:'lij'
      var vm = new Vue({
        el: '#app',
        data: {
          firstName: 'Dell',
          lastName: 'Lee',
    },
    watch:{
      firstName:function () {
        this.fullName=this.firstName+' '+this.lastName;
      },
      lastName:function () {
        this.fullName=this.firstName+' '+this.lastName;
      }
    },
    methods:{
      fullName: function () {
        return this.firstName + "" + this.lastName;
      }
    },
    computed: {//计算属性,有缓存
      fullNamecomputed: function () {
        return this.firstName + "" + this.lastName;
      }
    }
  })
</script>
</body>
</html>
